<!-- handle添加指定拖拽句柄 -->
<template>
  <div>
    <el-table :data="tableData" style="width: 100%" ref="dragTable">
      <el-table-column width="50">
        <template>
          <i class="el-icon-rank drag-handle" style="cursor: move"></i>
        </template>
      </el-table-column>

      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import Sortable from 'sortablejs';


export default {

  data () {
    return {
      tableData: [
        { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
        { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' },
        { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }
      ]
    };
  },
  mounted () {
    this.initSortable();
  },
  methods: {
    initSortable () {
      const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];
      this.sortable = Sortable.create(el, {
        animation: 150,//过渡动画
        handle: '.drag-handle',//拖拽句柄
        //********选中样式********
        ghostClass: 'ghost',
        chosenClass: 'chosen',
        forceFallback: true,//禁用原生HTML5拖拽，强制使用自定义的拖拽实现

      })
    }
  }
};
</script>

<style scoped>
/**下面选中样式不显示原因，样式优先级低于el-table，被覆盖了
解决：将下边样式代码放到全部样式代码中
 */
/* .chosen {
 
 border: solid 2px #52f043 !important; //被选中样式  
}
.ghost {
  
 background-color: rgb(21, 245, 245) !important;//拖拽时，鼠标经过的元素样式
} */
/* 在全局样式文件中（例如 main.css 或 style.css） */
</style>









<!-- 使用外部库sortable.js ，实现li列表拖拽排序-->
<!-- <template>
  <div>
    // 拖拽排序的容器 
    <ul id="itxst">
      <li v-for="item in items" :key="item.id" :data-id="item.id">
        {{ item.name }}
      </li>
    </ul>

    //显示拖拽后的顺序
    <pre>{{ sortedItems }}</pre>
  </div>
</template>

<script>
import Sortable from 'sortablejs';

export default {
  data () {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' }
      ],
      sortable: null, // 用于存储 Sortable 实例
      sortedItems: [] // 用于显示拖拽后的顺序
    };
  },
  mounted () {
    // 获取 DOM 元素
    const el = document.getElementById('itxst');

    // 设置 Sortable 配置
    const ops = {
      animation: 1000,
      onEnd: (evt) => {
        console.log(evt);
        // 获取拖动后的排序
        this.sortedItems = this.items.map(item => item.id);
        //alert(JSON.stringify(this.sortedItems));
      }
    };

    // 初始化 Sortable
    this.sortable = Sortable.create(el, ops);
  },
  beforeDestroy () {
    // 在组件销毁前销毁 Sortable 实例
    if (this.sortable) {
      this.sortable.destroy();
    }
  }
};
</script> -->


<!-- 不使用外部库sortable.js
 通过 row-class-name 为每一行动态添加行的类名 -->
<!-- <template>
  <div class="sort-container">
    <span class="title">项目排序</span>
    
    <el-table
      :data="projects"
      row-class-name="drag-row"
      @row-contextmenu.prevent
      border
    >
      <el-table-column prop="index" label="序号" width="200">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="项目名称"></el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      projects: [
        { id: '1', name: '男子10米气步枪' },
        { id: '2', name: '女子50米步枪三姿' },
        { id: '3', name: '男子双向飞碟' },
        { id: '4', name: '女子25米手枪' },
        { id: '5', name: '男子50米步枪卧射' },
      ],
      draggingIndex: null,// 当前正在拖拽的行索引
    };
  },
  mounted () {
    // 组件挂载后添加拖拽事件
    this.addDragEvents();
  },
  updated () {
    // 数据更新后重新添加拖拽事件
    // 使用 this.$nextTick 获取表格行的 DOM 元素
    this.$nextTick(() => {
      this.addDragEvents();
    });
  },
  methods: {
    // 添加拖拽事件
    addDragEvents () {
      // 获取所有带有类名 'drag-row' 的表格行
      const rows = document.querySelectorAll('.drag-row');
      // 遍历每一行，添加拖拽事件
      rows.forEach((row, index) => {
        row.draggable = true; // 设置行元素为可拖拽
        // 开始拖拽时的事件处理
        row.ondragstart = (event) => this.handleDragStart(event, index);
        // 拖拽经过时的事件处理
        row.ondragover = (event) => this.handleDragOver(event);
        // 拖拽放下时的事件处理
        row.ondrop = (event) => this.handleDrop(event, index);
      });
    },
    // 处理拖拽开始事件
    handleDragStart (event, index) {
      this.draggingIndex = index; // 记录当前拖拽行的索引
      event.dataTransfer.effectAllowed = 'move'; // 设置拖拽效果为移动
      event.dataTransfer.setData('text/plain', index); // 将索引存储到拖拽数据中
    },
    // 处理拖拽经过事件
    handleDragOver (event) {
      event.preventDefault(); // 阻止默认事件，允许放置
      event.dataTransfer.dropEffect = 'move'; // 设置拖拽效果为移动
    },
    // 处理拖拽放下事件
    handleDrop (event, targetIndex) {
      const sourceIndex = this.draggingIndex; // 获取开始拖拽时记录的索引

      // 如果源索引和目标索引相同，直接返回
      if (sourceIndex === targetIndex) return;

      // 创建项目列表的副本
      const projects = [...this.projects];
      // 删除源位置的项目，并存储被拖拽的项目
      const [movedItem] = projects.splice(sourceIndex, 1);
      // 在目标位置插入被拖拽的项目
      projects.splice(targetIndex, 0, movedItem);

      // 更新项目列表数据
      this.projects = projects;
      this.draggingIndex = null; // 重置拖拽索引
    },
  },
};
</script>
 
<style lang='scss' scoped>
.sort-container {
  padding: 15px;

  .title {
    font-size: 24px;
    font-weight: bold;
  }

  .el-table {
    margin-top: 20px;
  }
}
/* 自定义拖拽行样式 */
.drag-row {
  cursor: move;
  user-select: none;
}
.drag-row:hover {
  background-color: #f0f9ff;
}
</style> -->